import React, {FC} from 'react';
import {View, Image, StyleSheet, Text} from 'react-native';
import ShopStore from '../../../stores/ShopStore';
import {observer} from 'mobx-react';
type PropsType = {};
const Header: FC<PropsType> = observer(() => {
  const categoryList = ShopStore.categoryList;
  return (
    <View style={styles.root}>
      {categoryList.map(item => {
        return (
          <View key={`${item.id}`} style={styles.categoryItem}>
            <Image style={styles.itemImg} source={{uri: item.image}} />
            <Text style={styles.itemNameTxt}>{item.name}</Text>
          </View>
        );
      })}
    </View>
  );
});

const styles = StyleSheet.create({
  root: {
    width: '100%',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  categoryItem: {
    width: '20%',
    alignItems: 'center',
    paddingHorizontal: 16,
  },
  itemImg: {
    width: 40,
    height: 40,
    resizeMode: 'contain',
  },
  itemNameTxt: {
    fontSize: 14,
    color: '#333',
    marginTop: 6,
  },
});
export default Header;
